<template>
    <a-drawer
        :keyboard="false"
        :maskClosable="false"
        placement="right"
        title="工单信息"
        :open="visible"
        :width="'80%'"
        :confirmLoading="loading"
        centered
        @close="handleCancel"
        :footer="false"
    >
        <template #extra>
            <a-space>
                <!-- <a-button type="primary" @click="handleCancelOrder" v-if="[1].includes(modelRef.orderState)">取消订单</a-button> -->
            </a-space>
        </template>
        <div>
            <a-divider orientation="left">工单信息</a-divider>
            <a-descriptions title="" :column="3">
                <a-descriptions-item label="工单编号">{{ modelRef.orderNum || '' }}</a-descriptions-item>
                <a-descriptions-item label="工单状态">{{ statusMap[modelRef.orderState] || '' }}</a-descriptions-item>
                <a-descriptions-item label="工单来源">{{ orderSourceMap[modelRef.orderSource] || '' }}</a-descriptions-item>
                <a-descriptions-item label="创建时间">{{ modelRef.createTime || '' }}</a-descriptions-item>
                <a-descriptions-item label="订单金额">{{ modelRef.priceNormal || '-' }}元</a-descriptions-item>
                <a-descriptions-item label="支付方式">{{ paymentTypeMap[modelRef.paymentType] }}</a-descriptions-item>
                <a-descriptions-item label="下单人">{{ modelRef.orderPerson || '-' }}</a-descriptions-item>
                <a-descriptions-item label="发票是否上传">{{ invoiceUploadMap[modelRef.invoiceUpload] || '-' }}</a-descriptions-item>
                <template v-if="[3, 4, 5, 6, 7].includes(modelRef.orderState)">
                    <a-descriptions-item label="结算金额">{{ modelRef.settlementPrice || '-' }}元</a-descriptions-item>
                    <a-descriptions-item label="提成金额">-元</a-descriptions-item>
                    <a-descriptions-item label="退款金额">{{ modelRef.refundPrice || '-' }}元</a-descriptions-item>
                </template>
            </a-descriptions>
            <a-divider orientation="left">基础信息</a-divider>
            <a-descriptions title="" :column="3">
                <a-descriptions-item label="被陪护人名称">{{ modelRef.patientName }}</a-descriptions-item>
                <a-descriptions-item label="被陪护人手机号">
                    {{ modelRef.patientPhone ? modelRef.patientPhone.slice(0, 3) + '****' + modelRef.patientPhone.slice(-4) : '' }}
                </a-descriptions-item>
                <a-descriptions-item label="所在科室">
                    {{
                        [modelRef.projectName, modelRef.buildingName, modelRef.floorName, modelRef.departmentName, modelRef.bedNum ? modelRef.bedNum + '床' : '']
                            .filter(Boolean)
                            .join('-')
                    }}
                </a-descriptions-item>
                <a-descriptions-item label="陪护类型">{{ modelRef.serviceName || '' }}</a-descriptions-item>
                <a-descriptions-item label="陪护标准">{{ modelRef.serviceTypeName || '' }}</a-descriptions-item>
                <a-descriptions-item label="预约时间">
                    {{ modelRef.appointedStartTime ? modelRef.appointedStartTime.slice(0, -3) : '' }}~{{ modelRef.appointedEndTime ? modelRef.appointedEndTime.slice(0, -3) : '' }}
                </a-descriptions-item>
                <a-descriptions-item label="预约天数">{{ modelRef.appointedDay || '-' }}天</a-descriptions-item>
                <a-descriptions-item label="费用">{{ modelRef.priceNormal || '-' }}元</a-descriptions-item>
            </a-descriptions>
            <template v-if="modelRef.giveScore === 1 && (modelRef.evaluteList || []).length > 0">
                <a-divider orientation="left">评价信息</a-divider>
                <a-descriptions title="" :column="1" layout="vertical">
                    <a-descriptions-item :label="`${index + 1}、${item.dimensionName}`" v-for="(item, index) in modelRef.evaluteList" :key="item.id">
                        <a-rate disabled v-model:value="item.score"></a-rate>
                    </a-descriptions-item>
                </a-descriptions>
            </template>
            <template v-if="modelRef.invoiceNo">
                <a-divider orientation="left">发票信息</a-divider>
                <a-descriptions title="" :column="3">
                    <a-descriptions-item label="发票号">{{ modelRef.invoiceNo || '' }}</a-descriptions-item>
                    <a-descriptions-item label="发票链接">
                        <a-typography-link :href="modelRef.invoiceUrl" target="_blank">{{ modelRef.invoiceUrl || '' }}</a-typography-link>
                    </a-descriptions-item>
                </a-descriptions>
            </template>
            <template v-if="[3, 4, 5, 6, 7].includes(modelRef.orderState)">
                <a-divider orientation="left">陪护信息</a-divider>
                <a-descriptions title="" :column="3">
                    <a-descriptions-item label="陪护开始时间">{{ modelRef.actualStartTime || '' }}</a-descriptions-item>
                    <a-descriptions-item label="陪护结束时间">{{ modelRef.actualEndTime || '' }}</a-descriptions-item>
                    <!-- <a-descriptions-item label="护理人">
                        <a-avatar-group>
                            <a-avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1" />
                            <a href="https://www.antdv.com">
                                <a-avatar style="background-color: #f56a00">K</a-avatar>
                            </a>
                            <a-tooltip title="Ant User" placement="top">
                                <a-avatar style="background-color: #87d068">
                                    <template #icon><UserOutlined /></template>
                                </a-avatar>
                            </a-tooltip>
                            <a-avatar style="background-color: #1890ff">
                                <template #icon><AntDesignOutlined /></template>
                            </a-avatar>
                        </a-avatar-group>
                    </a-descriptions-item> -->
                </a-descriptions>
                <template v-if="(modelRef.carerList || []).length > 0">
                    <a-descriptions title="" :column="3" v-for="item in modelRef.carerList" :key="item.id">
                        <a-descriptions-item label="护理人">{{ item.carerName || '' }}</a-descriptions-item>
                        <a-descriptions-item label="联系电话">{{ item.carerPhone || '' }}</a-descriptions-item>
                    </a-descriptions>
                </template>
                <template v-if="modelRef.invoiceUrl">
                    <a-descriptions title="" :column="1">
                        <a-descriptions-item label="发票链接">
                            {{ modelRef.invoiceUrl || '' }}
                            <a-button type="primary" size="small" @click="handleCopy" class="ml-5">复制发票地址</a-button>
                        </a-descriptions-item>
                    </a-descriptions>
                </template>
            </template>
        </div>
    </a-drawer>
</template>

<script lang="ts">
    import { statusMap, orderSourceMap, paymentTypeMap, invoiceUploadMap } from './common';
    import { Modal, message } from 'ant-design-vue';
    import type { PropType } from 'vue';
    import { defineComponent, reactive, ref, watchEffect, watch, nextTick } from 'vue';
    import { cloneDeep, isEmpty, isUndefined, isString } from 'lodash-es';
    import { getMedicalCaregiverOrder } from '@/api/companion/order';
    import { useRoute } from 'vue-router';
    import { useUserStore } from '@/store/user';
    import { useClipboard } from '@vueuse/core';

    const userStore = useUserStore();
    const { copy } = useClipboard();
    export default defineComponent({
        props: {
            visible: {
                type: Boolean,
                required: true,
            },
            model: {
                type: Object as PropType<any>,
                default: () => null,
            },
        },
        emits: ['cancel', 'success', 'repeat'],
        setup(props, { emit }) {
            const route = useRoute();

            const loading = ref(false);

            const modelRef = reactive<any>({
                status: 1,
            });

            // 记录初始值
            const initValues = reactive({});

            watch(
                () => props.visible,
                () => {
                    Object.assign(initValues, cloneDeep(props.model));
                },
            );
            watchEffect(() => {
                if (props.visible) {
                    if (props.model.orderNum) {
                        queryHandler(props.model.id);
                    }
                }
            });

            const queryHandler = async id => {
                const orderInfo = await getMedicalCaregiverOrder(id);
                Object.assign(modelRef, orderInfo.data);
                // const invoiceInfo = await getMedicalCaregiverInvoice(id);
                // if (!isEmpty(invoiceInfo)) {
                //     Object.assign(modelRef, {
                //         invoiceNo: invoiceInfo.data.invoiceNo,
                //         invoiceUrl: invoiceInfo.data.invoiceUrl,
                //     });
                // }
            };

            const handleCancel = () => {
                Object.keys(modelRef).forEach(key => {
                    delete modelRef[key];
                });
                modelRef.status = 1;
                emit('cancel');
            };

            const handleCancelOrder = () => {
                Modal.confirm({
                    title: '提示',
                    content: `是否确定取消订单？`,
                    onOk() {
                        console.log('OK');
                    },
                    onCancel() {
                        console.log('Cancel');
                    },
                    class: 'test',
                });
            };

            const handleCopy = async () => {
                await copy(modelRef.invoiceUrl);
                message.success('复制成功');
            };

            return {
                userStore,
                loading,
                modelRef,
                handleCancel,
                initValues,

                isEmpty,
                queryHandler,

                isString,
                route,

                statusMap,
                orderSourceMap,
                paymentTypeMap,
                invoiceUploadMap,
                handleCancelOrder,
                handleCopy,
            };
        },
        components: {},
    });
</script>

<style lang="less" scoped>
    .wrap {
        height: 100%;
        display: flex;
    }
    .info-top {
        .left {
            width: 60%;
        }
    }
    .info-wrap {
        & > div {
            flex-shirk: 0;
        }
        // height: 100%;
        .left {
            width: 35%;
            margin-right: 10px;
            padding-right: 10px;
            overflow-y: auto;
            // height: 100%;
        }
        .right {
            flex: 1;
            overflow-y: auto;
            // height: 100%;
        }

        .follow-wrap {
            width: 30%;
        }
    }
</style>
